<template>
  <div class="com-container">
    <dv-scroll-board
      class="dv-scr-board"
      :config="config"
      @click="clickRow($event)"
    />
    <el-dialog title="详细信息" :visible.sync="dialogVisible">
      <el-row>
        <el-col :span="2" class="title"> id: </el-col>
        <el-col :span="4">{{ data.id }} </el-col>
        <el-col :span="2" class="title"> 名称: </el-col>
        <el-col :span="2"> {{ data.name }}</el-col>
        <el-col :span="2" class="title"> 生产厂家: </el-col>
        <el-col :span="4"> {{ data.brand }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="2" class="title"> 分类： </el-col>
        <el-col :span="4"> {{ data.type }} </el-col>
        <el-col :span="2" class="title">区域：</el-col>
        <el-col :span="2"> {{ data.area }} </el-col>
        <el-col :span="2" class="title"> 运行时常： </el-col>
        <el-col :span="4"> {{ data.time }} </el-col
        ><el-col :span="2" class="title"> 网络地址： </el-col
        ><el-col :span="6"> {{ data.webpath }} </el-col>
      </el-row>
    </el-dialog>
  </div>
</template><script>
export default {
  data() {
    return {
      allData: null, //服务器返回的数据
      config: {},
      data: {
        id: " ",
        brand: " ",
        area: " ",
        type: " ",
        name: " ",
        webpath: " ",
        time: " ",
      }, //渲染的数据
      dialogVisible: false,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //获取服务器数据
    async getData() {
      const res = await this.$http.get("/equipment/equipment");
      this.allData = res.data;
      // console.log(this.allData);
      this.config = {
        header: ["名称", "网络地址"],
        data: this.allData.map((item) => [item.name, item.webpath]),
        rowNum: 7, //表格行数
        headerHeight: 35,
        indexHeader: "序号",
        headerBGC: "RGBA(38, 45, 56,0.3)", //表头
        oddRowBGC: "RGBA(38, 45, 56,0.5)", //奇数行
        evenRowBGC: "RGBA(38, 45, 56,0.3)", //偶数行
        index: true,
        columnWidth: [80, 100],
        align: ["center"],
      };
      // console.log(this.config.data);
    },
    //把毫秒数转换成日期格式
    formatDate(time) {
      let date = new Date(time);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      return (
        year +
        "-" +
        (month < 10 ? "0" + month : month) +
        "-" +
        (day < 10 ? "0" + day : day) +
        " " +
        (hour < 10 ? "0" + hour : hour) +
        ":" +
        (minute < 10 ? "0" + minute : minute) +
        ":" +
        (second < 10 ? "0" + second : second)
      );
    },
    //点击表格行
    clickRow(index) {
      // console.log(index);
      this.data = this.allData[index.rowIndex];
      //把毫秒数转换成日期格式
      // this.data.time = this.formatDate(this.data.time);
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-dialog {
  background: rgba(22, 31, 38, 0.5) !important;
}
/deep/ .el-dialog__title {
  color: #fff;
}
/deep/ .el-dialog__body {
  color: #fff;
}
.el-row {
  font-size: 15px;
}
.el-col {
  font-size: 15px;
}
.title {
  font-weight: 700;
}
</style>